<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="jQuery/jquery-ui.min.css"/>
</head>
<body>
    <div id="div1" style="width: 100px;height: 100px;border: 1px solid red;"></div>
    <div id="div2" style="width: 300px;height: 200px;border: 1px solid green;"></div>
</body>
<script src="jQuery/jquery.js"></script>
<script src="jQuery/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#div1").draggable();
        $("#div2").droppable();     //这个是必须要的

        $("#div2").on("drop",function(event,ui){   //当div1拖动到div2中释放的时候触发函数
            //alert(event);
            $("#div2").text("droppable文本");   //触发函数发生的在div2中添加文本信息
        })

    });
</script>
</html>